<template>
    <view>
        <!-- pages/orderList/orderList.wxml -->

        <view class="navigtor" :style="'padding-top:' + statusBarHeight + 'px;height:' + titleBarHeight + 'px;line-height:' + titleBarHeight + 'px;'">
            <navigator class="left iconfont icon-help" url="../help/help"></navigator>
            <view class="title" :style="isIos ? 'font-weight:700' : 'text-align:left;padding-left:90rpx'">我的订单</view>
        </view>
        <block v-if="isLogin">
            <view class="tabs" :style="'top:' + (statusBarHeight + titleBarHeight) + 'px'">
                <van-dropdown-menu :active-color="mainColor">
                    <van-dropdown-item :value="value1" :options="option1" @change="OrderStatusDropdown" />
                    <van-dropdown-item :value="value2" :options="option2" @change="orderColumnDropdown" />
                </van-dropdown-menu>
            </view>
        </block>

        <view class="container" >
            <block v-if="isLogin">
                <block v-if="orderlist.length > 0">
                    <view class="lists" v-for="(item, index) in orderlist" :key="index">
                        <view class="item" @tap="openDoor" :data-index="item.orderId">
                            <view class="orderNo icon iconfont icon-quanbudingdan">{{ item.orderNo }}</view>
                            <block v-if="item.status == 0">
                                <view class="tag blue">未开始</view>
                            </block>
                            <block v-else-if="item.status == 1">
                                <view class="tag yellow">进行中</view>
                            </block>
                            <block v-else-if="item.status == 2">
                                <view class="tag finish">已完成</view>
                            </block>
                            <block v-else-if="item.status == 3">
                                <view class="tag gray">已取消</view>
                            </block>
                            <ul class="info">
                                <li>
                                    <image class="roomImg" :src="magic.split(item.roomImg)[0]"></image>
                                </li>
                                <li class="li">
                                    <view class="title">
                                        {{ item.roomName }}({{
                                            item.roomType === 1 ? '小包' : item.roomType === 2 ? '中包' : item.roomType === 3 ? '大包' : item.roomType === 4 ? '豪包' : '商务包'
                                        }})
                                    </view>
                                    <view>
                                        <span class="name">{{ item.storeName }}</span>
                                    </view>
                                    <!-- <view class="name">{{item.storeName}}</view> -->
                                </li>
                            </ul>
                            <!-- 时间段 -->
                            <view class="timeBox">
                                <view class="time">
                                    <view class="hour">{{ magic.splittime(item.startTime)[0] }}:{{ magic.splittime(item.startTime)[1] }}</view>
                                    <view class="date">{{ magic.splitkongge(item.startTime)[0] }}</view>
                                </view>
                                <view class="total border-primary">{{ item.orderHour }}小时</view>
                                <view class="time">
                                    <view class="hour">{{ magic.splittime(item.endTime)[0] }}:{{ magic.splittime(item.endTime)[1] }}</view>
                                    <view class="date">{{ magic.splitkongge(item.endTime)[0] }}</view>
                                </view>
                            </view>
                            <!-- 底部操作 -->
                            <view class="bottom">
                                <view>
                                    <view class="info">创建时间：{{ item.createTime }}</view>
                                    <view class="info" v-if="item.couponName">
                                        使用卡券：
                                        <label>{{ item.couponName }}</label>
                                    </view>
                                    <!-- 管理员端 -->
                                    <block v-if="userinfo.userType == 12 || userinfo.userType == 13">
                                        <view class="info">预订用户：{{ item.nickname }}</view>
                                    </block>
                                </view>
                                <view>
                                    <view class="info">
                                        支付方式：
                                        <text>{{ item.payType == 1 ? '微信' : item.payType == 2 ? '余额' : item.payType == 3 ? '团购' : '套餐' }}</text>
                                    </view>
                                    <view class="info">
                                        实际支付：
                                        <text class="price">￥{{ item.payPrice }}</text>
                                    </view>
                                    <block v-if="item.deposit">
                                        <view class="info">
                                            支付押金：
                                            <text class="color-attention">￥{{ item.deposit }}</text>
                                        </view>
                                    </block>
                                    <block v-if="item.status == 3">
                                        <view class="info">
                                            订单退款：
                                            <text class="color-attention">￥{{ item.refundPrice }}</text>
                                        </view>
                                    </block>
                                </view>
                            </view>
                            <block v-if="item.status == 2 || item.status == 3">
                                <!-- 取消、已完成 -->
                            </block>
                            <block v-else>
                                <view class="btns">
                                    <button hover-class="button-click" v-if="item.status == 0" class="btn cancel" @tap.stop.prevent="cancelOrder" :data-info="item">
                                        取消订单
                                    </button>
                                    <button hover-class="button-click" class="btn bg-primary" @tap.stop.prevent="openDoor" :data-index="item.orderId">到店开门</button>
                                </view>
                            </block>
                        </view>
                    </view>
                </block>
                <block v-else>
                    <!-- 无订单和未登录 -->
                    <view class="nodata">- 暂无订单 -</view>
                </block>
            </block>
            <block v-else>
				<login></login>
                <!-- <view class="containerlogin">
                    <view class="photo">
                        <view class="img">
                            <image src="/static/logo.png" mode="widthFix" />
                        </view>
                        <view class="name">{{ appName }}</view>
                    </view>
                    <button hover-class="button-click" class="loginBtn bg-primary" @getphonenumber="phone" open-type="getPhoneNumber">一键登录</button>
                </view> -->
            </block>
        </view>
        <!-- 续单弹窗 -->
        <van-dialog use-slot title="订单续费" :show="renewShow" show-cancel-button>
            <view class="dialog">
                <view class="item">
                    <label>请选择增加的时间：</label>
                    <van-stepper :value="0" step="0.5" min="0" disable-input />
                    时
                </view>
                <view class="item">
                    <label>订单原结束时间：</label>
                    <text>2023年11月11日 23:31</text>
                </view>
                <view class="item">
                    <label>增加后结束时间：</label>
                    <text>2023年11月12日 23:31</text>
                </view>
                <view class="item">
                    <label>订单单价：</label>
                    <text class="color-attention">18元</text>
                    /小时
                </view>
                <view class="item">
                    <label>支付总价：</label>
                    <text class="color-attention">180</text>
                    元
                </view>
                <view class="item">
                    <label>支付方式：</label>
                    <radio-group class="pays">
                        <label class="pay">
                            <radio value="wx" :checked="true" />
                            微信支付
                        </label>
                        <label class="pay">
                            <radio value="ye" />
                            余额支付
                            <view class="info">账户余额: 0元</view>
                            <view class="info">赠送余额: 0元</view>
                        </label>
                    </radio-group>
                </view>
            </view>
        </van-dialog>
        <!-- 取消订单弹窗 -->
        <van-dialog use-slot title="取消订单" :show="cancelOrderShow" show-cancel-button cancel-button-text="暂不取消" confirm-button-text="确认取消" @confirm="cancelConfirm">
            <view class="dialog">
                <view class="item">
                    <label>当前位置：</label>
                    <text>
                        {{ orderInfo.roomName }}（{{
                            orderInfo.roomType === 1
                                ? '小包'
                                : orderInfo.roomType === 2
                                ? '中包'
                                : orderInfo.roomType === 3
                                ? '大包'
                                : orderInfo.roomType === 4
                                ? '豪包'
                                : '商务包'
                        }}）
                    </text>
                </view>
                <view class="item">
                    <label>预约时间：</label>
                    <text>{{ orderInfo.startTime }}~{{ orderInfo.endTime }}</text>
                </view>
                <view class="item">
                    <label>是否确认取消订单？</label>
                </view>
                <view class="item">
                    <view class="color-attention note">温馨提示：取消后，费用将按原支付方式退回！</view>
                </view>
            </view>
        </van-dialog>
        <!-- 取消订单成功弹窗 -->
        <van-dialog use-slot title="订单取消成功" :show="cancelOrderSuccess" confirm-button-text="好的">
            <view class="dialog">
                <view class="item">
                    <label>已为您成功取消下列订单</label>
                </view>
                <view class="item">
                    <label>当前位置：</label>
                    <text>
                        {{ orderInfo.roomName }}（{{
                            orderInfo.roomType === 1
                                ? '小包'
                                : orderInfo.roomType === 2
                                ? '中包'
                                : orderInfo.roomType === 3
                                ? '大包'
                                : orderInfo.roomType === 4
                                ? '豪包'
                                : '商务包'
                        }}）
                    </text>
                </view>
                <view class="item">
                    <label>预约时间：</label>
                    <text>{{ orderInfo.startTime }}~{{ orderInfo.endTime }}</text>
                </view>
                <view class="item">
                    <view class="color-attention note">取消成功，费用已返还到原支付方式！</view>
                </view>
            </view>
        </van-dialog>
    </view>
</template>
<script module="magic" lang="wxs" src="@/utils/magic.wxs"></script>
<script>
import login from "../login/login.vue"
// pages/orderList/orderList.js
var http = require('../../utils/http');
var util1 = require('../../utils/util.js');
const app = getApp();
export default {
	components: {
		login:login
	},
    data() {
        return {
            appName: app.globalData.appName,
            statusBarHeight: '',
            titleBarHeight: '',

            option1: [
                {
                    text: '全部状态',
                    value: -1
                },
                {
                    text: '未开始',
                    value: 0
                },
                {
                    text: '进行中',
                    value: 1
                },
                {
                    text: '已取消',
                    value: 3
                },
                {
                    text: '已完成',
                    value: 2
                }
            ],

            option2: [
                {
                    text: '默认排序',
                    value: '0'
                },
                {
                    text: '下单时间',
                    value: '1'
                },
                {
                    text: '预约时间',
                    value: '2'
                }
            ],

            value1: -1,
            value2: '0',
            renewShow: false,

            //续费弹窗
            cancelOrderShow: false,

            //订单取消弹窗
            cancelOrderSucShow: false,

            //取消成功弹窗
            status: '',

            //订单状态筛选
            orderColumn: '',

            //排序
            orderlist: [],

            //订单列表数组
            isLogin: app.globalData.isLogin,

            userinfo: {
                userType: 0
            },

            //用户信息
            orderInfo: {
                roomName: '',
                roomType: 0,
                startTime: '',
                endTime: ''
            },

            //选择操作的订单
            isIos: app.globalData.isIos,

            pageindex: 1,

            //分页的page
            canLoadMore: true,

            //是否还能加载更多
            mainColor: app.globalData.mainColor,

            cancelOrderSuccess: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        let that = this;
        this.setData({
            statusBarHeight: uni.getStorageSync('statusBarHeight'),
            titleBarHeight: uni.getStorageSync('titleBarHeight')
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        let that = this;
        that.setData({
            isLogin: app.globalData.isLogin
        });
        if (app.globalData.isLogin) {
            this.getOrderListdata('refresh');
            that.getuserinfo();
        }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        let that = this;
        that.pageindex = 1;
        this.getOrderListdata('refresh');
        that.canLoadMore = true;
        uni.stopPullDownRefresh();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        let that = this;
        if (that.canLoadMore) {
            that.pageindex++;
            this.getOrderListdata('');
        } else {
            uni.showToast({
                title: '我是有底线的...'
            });
        }
    },
    methods: {
        //状态下拉菜单发生变化
        OrderStatusDropdown(event) {
            let that = this;
            //console.log('选择的值')
            this.option1.map((it) => {
                if (it.value == event.detail) {
                    //console.log(it.value)
                    if (it.value == -1) {
                        that.setData({
                            status: ''
                        });
                    } else {
                        that.setData({
                            status: it.value
                        });
                    }
                    that.getOrderListdata('refresh');
                }
            });
        },

        //
        orderColumnDropdown(event) {
            let that = this;
            //console.log('选择的值')
            this.option2.map((it) => {
                if (it.value == event.detail) {
                    //console.log(it.value)
                    if (it.value == 0) {
                        that.setData({
                            orderColumn: '' //排序
                        });
                    } else if (it.value == 1) {
                        that.setData({
                            orderColumn: 'createTime'
                        });
                    } else if (it.value == 2) {
                        that.setData({
                            orderColumn: 'startTime'
                        });
                    }
                    that.getOrderListdata('refresh');
                }
            });
        },

        openDoor(e) {
            var that = this;
            let aindex = e.currentTarget.dataset.index;
            uni.navigateTo({
                url: '../orderDetail/orderDetail?OrderNo=' + aindex + '&toPage=true'
            });
        },

        // 续费弹窗
        renewClick() {
            this.setData({
                renewShow: true
            });
        },

        // 取消弹窗
        cancelOrder(e) {
            var orderInfo = e.currentTarget.dataset.info;
            this.setData({
                cancelOrderShow: true,
                orderInfo: orderInfo
            });
        },

        // 确认取消
        cancelConfirm() {
            var that = this;
            if (app.globalData.isLogin) {
                http.request(
                    '/member/order/cancelOrder/' + that.orderInfo.orderId,
                    '1',
                    'post',
                    {
                        orderId: that.orderInfo.orderId
                    },
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('返回111===');
                        console.info(info);
                        if (info.code == 0) {
                            that.setData({
                                cancelOrderSuccess: true
                            });
                            that.getOrderListdata('refresh');
                        } else {
                            uni.showModal({
                                content: info.msg,
                                showCancel: false
                            });
                        }
                    },
                    function fail(info) {}
                );
            }
        },

        // 取消成功关闭弹窗
        cancelSuccessConfirm() {
            this.setData({
                cancelOrderSucShow: false
            });
        },

        getOrderListdata: function (e) {
            var that = this;
            if (app.globalData.isLogin) {
                let message = '';
                if (e == 'refresh') {
                    //刷新，page变为1
                    that.setData({
                        orderlist: [],
                        //列表数组
                        canLoadMore: true,
                        //是否还能加载更多
                        pageindex: 1
                    });
                    message = '获取中...';
                }
                http.request(
                    '/member/order/getOrderPage',
                    '1',
                    'post',
                    {
                        pageNo: that.pageindex,
                        pageSize: 10,
                        status: that.status,
                        orderColumn: that.orderColumn
                    },
                    app.globalData.userDatatoken.accessToken,
                    message,
                    function success(info) {
                        console.info('订单列表===');
                        console.info(info);
                        if (info.code == 0) {
                            if (e == 'refresh') {
                                if (info.data.list.length > 0) {
                                    console.log('有数组+++++++');
                                    that.setData({
                                        orderlist: info.data.list
                                    });
                                } else {
                                    console.log('没有数组+++++++');
                                    that.setData({
                                        orderlist: []
                                    });
                                }
                            } else {
                                if (info.data != null && info.data.list.length <= info.data.total) {
                                    that.setData({
                                        canLoadMore: false
                                    });
                                }
                                let arr = that.orderlist;
                                let arrs = arr.concat(info.data.list);
                                that.setData({
                                    orderlist: arrs
                                });
                            }
                        }
                    },
                    function fail(info) {}
                );
            } else {
                //console.log('未登录失败！')
            }
        },

        phone: function (e) {
            //console.log("授权用户手机号");
            var that = this;
            if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
                uni.showToast({
                    title: '已取消授权'
                });
            }
            if (e.detail.errMsg == 'getPhoneNumber:ok') {
                //console.log('手机号码授权+++++++');
                //console.log(e.detail);
                //console.log('手机号码授权+++++++');
                uni.login({
                    success: function (res) {
                        //console.log('111++++==');
                        //console.log(res);
                        //console.log('111++++==');
                        if (res.code != null) {
                            http.request(
                                '/member/auth/weixin-mini-app-login',
                                '1',
                                'post',
                                {
                                    phoneCode: e.detail.code,
                                    loginCode: res.code
                                },
                                '',
                                '获取中...',
                                function success(info) {
                                    console.info('返回111===');
                                    console.info(info);
                                    if (info.code == 0) {
                                        if (info.data) {
                                            app.globalData.userDatatoken = info.data;
                                            app.globalData.isLogin = true;
                                            that.setData({
                                                isLogin: true
                                            });
                                            //缓存服务器返回的用户信息
                                            uni.setStorageSync('userDatatoken', info.data);
                                            that.getOrderListdata('refresh');
                                        }
                                    }
                                },
                                function fail(info) {}
                            );
                        } else {
                            //console.log('登录失败！' + res.errMsg)
                        }
                    }
                });
            }
        },

        getuserinfo: function () {
            var that = this;
            if (app.globalData.isLogin) {
                http.request(
                    '/member/user/get',
                    '1',
                    'get',
                    {},
                    app.globalData.userDatatoken.accessToken,
                    '',
                    function success(info) {
                        console.info('我的信息===');
                        console.info(info);
                        if (info.code == 0) {
                            that.setData({
                                userinfo: info.data
                            });
                        }
                    },
                    function fail(info) {}
                );
            } else {
                //console.log('未登录失败！')
            }
        }
    }
};
</script>
<style>
@import './orderList.css';
</style>
